<!--
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->

<!--
The `core-tooltip` element creates a hover tooltip centered for the content
it contains. It can be positioned on the top|bottom|left|right of content using
the `position` attribute.

To include HTML in the tooltip, include the `tip` attribute on the relevant
content.

<b>Example</b>:

    <core-tooltip label="I'm a tooltip">
      <span>Hover over me.</span>
    </core-tooltip>

<b>Example</b> - positioning the tooltip to the right:

    <core-tooltip label="I'm a tooltip to the right" position="right">
      <polymer-ui-icon-button icon="drawer"></polymer-ui-icon-button>
    </core-tooltip>

<b>Example</b> - no arrow and showing by default:

    <core-tooltip label="Tooltip with no arrow and always on" noarrow show>
      <img src="image.jpg">
    </core-tooltip>

<b>Example</b> - rich tooltip using the `tip` attribute:

    <core-tooltip>
      <div>Example of a rich information tooltip</div>
      <div tip>
        <img src="profile.jpg">Foo <b>Bar</b> - <a href="#">@baz</a>
      </div>
    </core-tooltip>

@group Polymer Core Elements
@element core-tooltip
@homepage http://polymer.github.io/core-tooltip
-->

<link rel="import" href="../polymer/polymer.html">

<!-- TODO: would be nice to inherit from label to get .htmlFor, and .control,
           but the latter is readonly. -->
<!-- TODO: support off center arrows. -->
<!-- TODO: detect mobile and apply the .large class, instead of manual
           control. -->
<!-- TODO: possibly reuse core-overlay. -->
<polymer-element name="core-tooltip" attributes="noarrow position label show" tabindex="0">
<template>

  <link rel="stylesheet" href="core-tooltip.css">

  <div id="tooltip" class="polymer-tooltip {{position}} {{ {noarrow: noarrow, show: show} | tokenList}}">
    <content select="[tip]">{{label}}</content>
  </div>

  <content></content>

</template>
<script>

  Polymer('core-tooltip', {

    /**
     * A simple string label for the tooltip to display. To display a rich
     * that includes HTML, use the `tip` attribute on the content.
     *
     * @attribute label
     * @type string
     * @default null
     */
    label: null,

    /**
     * If true, the tooltip an arrow pointing towards the content.
     *
     * @attribute noarrow
     * @type boolean
     * @default false
     */
    noarrow: false,

    /**
     * If true, the tooltip displays by default.
     *
     * @attribute show
     * @type boolean
     * @default false
     */
    show: false,

    /**
     * Positions the tooltip to the top, right, bottom, left of its content.
     *
     * @attribute position
     * @type string
     * @default 'bottom'
     */
    position: 'bottom',

    attached: function() {
      this.setPosition();
    },

    labelChanged: function(oldVal, newVal) {
      // Run if we're not after attached().
      if (oldVal) {
        this.setPosition();
      }
    },

    setPosition: function() {
      var controlWidth = this.clientWidth;
      var controlHeight = this.clientHeight;

      var styles = getComputedStyle(this.$.tooltip);
      var toolTipWidth = parseFloat(styles.width);
      var toolTipHeight = parseFloat(styles.height);

      switch (this.position) {
        case 'top':
        case 'bottom':
          this.$.tooltip.style.left = (controlWidth - toolTipWidth) / 2 + 'px';
          break;
        case 'left':
        case 'right':
          this.$.tooltip.style.top = (controlHeight - toolTipHeight) / 2 + 'px';
          break;
      }
    }
  });

</script>
</polymer-element>
